<template>
  <div class="if-demo">
    <!-- v-if 会重新渲染，v-show 不会重新渲染，直接使用display实现。 -->
    <h3>------------------</h3>
    <h3>条件渲染</h3>
    <div v-if="flag">你能看见我吗？</div>
    <div v-if="type === 'A'">A</div>
    <div v-else-if="type == 'B'">B</div>
    <div v-else>NOT A B C</div>
    <div v-show="showFlag">SHOW 测试</div>
  </div>
</template>

<script>
export default {
  name: "IfShowDemo",
  data() {
    return {
      flag: true,
      type: "B",
      showFlag: true,
    };
  },
};
</script>

<style scoped>
.active {
  font: 800 18px/40px "微软雅黑";
}
</style>
